<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>小米盒子</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_803308_us3np2fsr7s.css">
    <link rel="stylesheet" href="css/head.css">
    <link rel="stylesheet" href="css/footer.css">
    <link rel="stylesheet" href="css/index.css">
    <style>
    *{padding: 0;margin: 0}
    </style>
</head>
<body>
    <!-- 头部开始 -->
    <div class="head">
        <div class="head-all center">
            <div class="head-left">
                <a href="">小米网&nbsp;&nbsp;&nbsp;|</a>
                <a href="">&nbsp;&nbsp;MIUI&nbsp;&nbsp;&nbsp;|</a>
                <a href="">&nbsp;&nbsp;米聊&nbsp;&nbsp;&nbsp;|</a>
                <a href="">&nbsp;&nbsp;游戏&nbsp;&nbsp;&nbsp;|</a>
                <a href="">&nbsp;&nbsp;多看阅读&nbsp;&nbsp;&nbsp;|</a>
                <a href="">&nbsp;&nbsp;云服务&nbsp;&nbsp;&nbsp;|</a>
                <a href="">&nbsp;&nbsp;小米网移动版&nbsp;&nbsp;&nbsp;|</a>
                <a href="">&nbsp;&nbsp;Select region</a>
            </div>
            <div class="head-right">
                <a href="">登录&nbsp;&nbsp;&nbsp;|</a>
                <a href="">&nbsp;&nbsp;&nbsp;注册</a>
            </div>
        </div> 
    </div>
    <!-- 头部结束 -->

    <!-- logo和搜索开始 -->
    <div class="search center">
        <div class="search-logo">
            <img src="images/logo.png" alt="小米">
        </div>
        <div class="search-shop">
            <div class="search-clock">
                <div class="search-clock-left">
                    <i class="iconfont icon-naozhong1"></i>
                </div>
                <div class="search-clock-right">
                    <p>5月12日开放购买</p>
                </div>
            </div>
            <div class="search-cart">
                <form class="parent">
                    <input type="text" placeholder="&nbsp;&nbsp;搜索您需要的商品">
                    <button></button>
                </form>
                <button class="btn center">
                    <i class="iconfont icon-ziyuan"></i>
                    <p>购物车</p>
                </button>
            </div>
        </div>
    </div>
    <!-- logo和搜索结束 -->

    <!-- 导航开始 -->
    <ul class="nav center">
        <li class="drop-down"><a href="#">全部商品分类&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;∨</a>
            <ul class="drop-down-content">
                <li><a href="#">手机</a></li>
                <li><a href="#">平板</a></li>
                <li><a href="#">台式电脑</a></li>
            </ul>
        </li>
        <li><a href="#">首页</a></li>
        <li><a href="#">小米手机</a></li>
        <li><a href="#">红米</a></li>
        <li><a href="#">小米平板</a></li>
        <li><a href="#">小米电视</a></li>
        <li><a href="#">盒子</a></li>
        <li><a href="#">路由器</a></li>
        <li><a href="#">合约机</a></li>
        <li><a href="#">服务</a></li>
        <li><a href="#">社区</a></li>
    </ul>
    <!-- 导航结束 -->

    <!-- 中间内容开始 -->
    <div class="container">
            <div class="enhance-all">
                <div class="enhance center">
                    <div class="enhance-left">
                        <h3>小米小盒子</h3>
                        <p>| &nbsp;小米盒子 增强版</p>
                    </div>
                    <div class="enhance-right">
                        <a href="">综述</a>
                        <a href="">设计</a>
                        <a href="">片源</a>
                        <a href="">功能</a>
                        <a href="">配置</a>
                        <a href="">产品故事</a>
                        <a href="">参数</a>
                        <a href="">讨论区</a>
                        <a href="">F码通道</a>
                        <button>立即购买</button>
                    </div>
                </div>
            </div>
        <div class="small-box center">
            <img src="images/reddot.jpg" alt="">
            <h1>小米小盒子</h1>
            <p>全球最小的全高清网络机顶盒</p>
            <h2>199</h2><span>元</span>
            <button>立即购买</button>
        </div>
        <div class="small-box-pictrue"></div>
        <div class="socket">
            <h1>顶尖科技，小到难以置信</h1>
            <p>小米小盒子出乎意料的小，采用电源直插，仅占一个插线孔，可<br>随意放在任何一个角落，无需为它特别准备空间。</p>

        </div>
        <div class="convenience">
                <h1>收起式插头设计，方便随身携带</h1>
                <p>小米小盒子只需要连接一根HDMI线就可使用，插头收起后可以随便放在<br>口袋或者背包的空隙里。出差、旅行酒店内继续追剧看片非常方便。</p>
            <!-- <img src="images/jihe.png" alt=""> -->
        </div>
        <div class="source">
            <h2>10亿美金打造海量超级影视资源</h2>
            <h1>超140000小时</h1>
            <p>高清大片、热播电视剧、最新综艺、动漫、体育赛事、经典纪录片</p>
        </div>
        <div class="happy"></div>
        <div class="gift">
            <h1>小米最好的新年礼物</h1>
            <h2>199</h2><span>元</span>
            <img src="images/hz-28.jpg" alt="">
            <button>立即购买</button>
        </div>
        <div class="kind-all">
            <div class="kind center">
                <div class="kind-1">
                    <img src="images/hzs-10.jpg" alt="">
                    <p>&nbsp;&nbsp;&nbsp;设计</p>
                </div>
                <div class="kind-1">
                    <img src="images/hzs-11.jpg" alt="">
                    <p>&nbsp;&nbsp;&nbsp;&nbsp;片源</p>
                </div>
                <div class="kind-1">
                    <img src="images/hzs-12.jpg" alt="">
                    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;功能</p>
                </div>
                <div class="kind-1">
                    <img src="images/hz-13.jpg" alt="">
                    <p>&nbsp;&nbsp;&nbsp;&nbsp;配置</p>
                </div>
                <div>
                    <img src="images/gongyi.png" alt="">
                    <p>&nbsp;产品故事</p>
                </div>
            </div>
        </div>
        <div class="game-all">
            <div class="game center">
                <div class="game-1 img-1">
                    <img src="images/shoubing (1).jpg" alt="">
                    <h3>&nbsp;&nbsp;&nbsp;小米蓝牙手柄</h3>
                    <p>双马达震动 三轴重力感应<br>小米电视、盒子游戏必备</p>
                    <span>99元</span>
                </div>
                <div class="game-1 img-1">
                    <img src="images/common-footer-mitv2.jpg" alt="">
                    <h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;小米电视 2</h3>
                    <p>配备独立音响的超强 4k 电视<br>含电视、Soundbar 与无线低音炮</p>
                    <span>3999元</span>
                </div>
                <div class="game-2 img-2">
                    <img src="images/common-footer-mibox.jpg" alt="">
                    <h3>小米盒子 增强版</h3>
                    <p>首款 4k 超高清网络机顶盒<br>性能提升至3倍，电视变身游戏机</p>
                    <span>299元</span>
                </div>
            </div>
        </div>
        <div class="enhance-all">
            <div class="enhance center">
                <div class="enhance-left">
                    <h3>小米小盒子</h3>
                    <p>| &nbsp;小米盒子 增强版</p>
                </div>
                <div class="enhance-right">
                    <a href="">综述</a>
                    <a href="">设计</a>
                    <a href="">片源</a>
                    <a href="">功能</a>
                    <a href="">配置</a>
                    <a href="">产品故事</a>
                    <a href="">参数</a>
                    <a href="">讨论区</a>
                    <a href="">F码通道</a>
                    <button>立即购买</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 中间内容结束 -->

    <!-- 尾部开始 -->
    <div class="footer-all center">
        <div class="footer-top">
            <div class="footer-1">
                    <img src="images/10.png" alt="" >
                    <p>1小时快修服务</p>
            </div>  
            <div class="footer-2"> 
                    <img src="images/11.png" alt="">
                    <p>7天无理由退货</p>
            </div>
            <div class="footer-3">
                    <img src="images/12.png" alt="">
                    <p>15天免费换货</p>
            </div>
            <div class="footer-4">
                    <img src="images/13.png" alt="">
                    <p>满150元包邮</p>
            </div>  
            <div class="footer-5">
                    <img src="images/14.png" alt="">
                    <p>520余家售后网点<br></p>
            </div>    
        </div>
        <div class="footer-center">
            <div class="footer-help">
                <h3>帮助中心</h3>
                <p>购物指南</p>
                <p>支付方式</p>
                <p>配送方式</p>
            </div>
            <div class="footer-server">
                <h3>服务支持</h3>
                <p>售后政策</p>
                <p>自助服务</p>
                <p>相关下载</p>
            </div>
            <div class="footer-home">
                <h3>小米之家</h3>
                <p>小米之家</p>
                <p>服务网点</p>
                <p>预约亲临到店服务</p>
            </div>
            <div class="footer-about">
                <h3>关于小米</h3>
                <p>了解小米</p>
                <p>加入小米</p>
                <p>联系我们</p>
            </div>
            <div class="footer-us">
                <h3>关注我们</h3>
                <p>新浪微博</p>
                <p>小米部落</p>
                <p>官方微信</p>
            </div>
            <div class="footer-phone">
                <h2>400-100-5678</h2>
                <p>周一至周日8:00-18:00</p>
                <p>（仅收市话费）</p>
                <button class="btn-1">24小时在线服务</button>
            </div>
        </div>
        <div class="footer-down">
            <div class="footer-web">
            <p>小米旗下网站：小米网 | MIUI | 米聊 | 多看书城 | 小米路由器 | 繁体香港 | 繁体台湾 | English | 小米后院 | 小米天猫店 | 小米淘宝直营店 | 小米网盟</p>    
            <p>@mi.com 京ICP证110507号 京ICP备1004644号 京网文[2014]0059-0009号</p>    
        </div>
        </div>
        <div class="footer-brand">
        <img src="images/16.png" alt="" >
        <select class="footer-select">
            <option>简体中文</option>
            <option>繁体中文</option>
            <option>英语</option>
        </select>
        </div>
    </div>
    <!--尾部结束 -->
</body>
</html>